<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- <link rel="stylesheet" type="text/css" href="http://unpkg.com/view-design/dist/styles/iview.css"> -->
    <script type="text/javascript" src="./vue.js"></script>
    <title>组件详解</title>
</head>
<body>
    <h2>全局组件</h2>
    <div id="app">
        <global-component></global-component>
    </div>
    <h2>局部组件</h2>
    <div id="app1">
            <my-component></my-component>
    </div>
    <h2>父组件通过props向子组件传值</h2>
    <div id="app2">
        <input type="text" v-model="parentMessage">
        <my-component :parent-message="parentMessage"></my-component>
    </div>
    <script>
        Vue.component('global-component',{
            template:'<div>我是全局组件</div>'
        });
        var app1 = new Vue({
            el:'#app'
        });

        var Child = {
            template:'<div>我是局部组件</div>',
            mounted:function(){
                console.log(1);
            }
        }

        var app1 = new Vue({
            el:'#app1',
            components:{
                'my-component':Child
            }
        });
        var app2Child = {
            props:['parentMessage'],
            template:'<div>通过props子组件接收父组件的值为（单向数据流）：{{parentMessage}}</div>',
        }
        var app2 = new Vue({
            el:'#app2',
            data:{
                parentMessage:''
            },
            components:{
                'my-component':app2Child
            }
        });
    </script>
</body>
</html>